[#ftl]
[@define "agile.TextShadowEditor","agile._MetadataEditor,agile.MultiItemEditorListener"]
	[#assign templateString][#compress]	
	<table cellspacing="3px">
	<tr>
		<td valign="top" nowrap="true" title="{i18n_text_shadow_tooltip}" class="tooltip">
			<div style="margin-top:5px;">{i18n_text_shadow}</div>
			<div data-dojo-attach-point="previewShadow" style="margin-top:40px;margin-left:5px;width:50px;height:50px;font-size:15px">TEXT</div>			
		</td>	
		<td valign="top">
		<div data-dojo-type="agile.MultiItemEditor" data-dojo-attach-point="itemEditor">
			<table cellspacing="3px">
			<tr>				
				<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="hShadow" class="editor" data-dojo-props='required:true,defValue:"0px",options:"0",unit:"px",placeHolder:"horizental"' title="{i18n_h_shadown_tooltip}"></div></td>
				<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="vShadow" class="editor" data-dojo-props='required:true,defValue:"0px",options:"0",unit:"px",placeHolder:"vertical"' title="{i18n_v_shadown_tooltip}"></div></td>
				<td><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="blur" class="editor" data-dojo-props='required:true,defValue:"0px",options:"0",unit:"px",placeHolder:"blur"' title="{i18n_shadow_blur_tooltip}"></div></td>
				<td valign="top"><div data-dojo-type='agile.ColorSelector' data-dojo-attach-point="color" class="editor" title="{i18n_shadow_color_tooltip}"></div></td>			
			</tr>
			</table>  
		</div>	
		</td>
	</tr>
	</table> 
	[/#compress][/#assign]
	templateString:"${templateString?js_string}",htmlName:"text-shadow",name:"textShadow"
	,init:function(){		
		this.itemEditor.listener = this;
	}
	,onItemEdited:function(item){
		//summary: call-back when an item is being edited
		style.set(this.previewShadow,agile.adviseCssName4Js(this.htmlName),item.innerHTML);		
	}
	,onItemSelected:function(items){	
		//preview the shadows
		var shadow = "";
		array.forEach(items,function(item){
			shadow += item.innerHTML + ",";
		})
		if(shadow){//remove the last item delimeter
			shadow = shadow.substring(0,shadow.length - 1);
 		}
		style.set(this.previewShadow,agile.adviseCssName4Js(this.htmlName),shadow);								
	}
	,onValueChanged:function(value){
		//summary: call-back when the itemStore(MultiSelect) value is changed
		this.onChange(value,null,this.htmlName);
	}
	,reset1:function(name,value){
		if(name == "value"){			
			this.itemEditor.reset1("value",value[this.htmlName]);					
		}else if(name == "disabled" || name == "readOnly"){
			this.itemEditor.reset1(name,value);	
		}else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){	
		return this.itemEditor.isValid();
	}
[/@]
